<template>
  <div class="container">
    <!-- <div class="top-panel">
      <div class="top-cell" @click="$router.push('/commission-msg')">
        <div class="img">
          <div v-if="unread.bonus" class="dot">{{ unread.bonus }}</div>
          <img src="@/assets/消息中心-assets/31.png" alt="" />
        </div>
        <div class="text">佣金消息</div>
      </div>
      <div @click="$router.push('/my-fans')" class="top-cell">
        <div class="img">
          <div v-if="unread.concerns" class="dot">{{ unread.concerns }}</div>
          <img src="@/assets/new-icon/新增关注.png" alt="" />
        </div>
        <div class="text">新增关注</div>
      </div>
      <div @click="$router.push('/receive-comment')" class="top-cell">
        <div class="img">
          <div v-if="unread.evaluate" class="dot">{{ unread.evaluate }}</div>
          <img src="@/assets/new-icon/评论和@.png" alt="" />
        </div>
        <div class="text">评论</div>
      </div>
    </div> -->
    <div class="msg-list">
      <div
        @click="$router.push('/sys-notice')"
        class="msg-cell with-grey-bottom-border"
      >
        <div class="img">
          <div v-if="unread.system" class="dot">{{ unread.system }}</div>
          <img src="@/assets/new-icon/system.png" alt="" />
        </div>
        <div class="content">
          <div class="title">系统通知</div>
          <!-- <div class="detail">最新官方消息</div> -->
        </div>
      </div>
      <div
        @click="$router.push('/orders-msg')"
        class="msg-cell with-grey-bottom-border"
      >
        <div class="img">
          <div v-if="unread.system" class="dot">{{ unread.system }}</div>
          <img src="@/assets/new-icon/order.png" alt="" />
        </div>
        <div class="content">
          <div class="title">订单消息</div>
          <!-- <div class="detail">最新官方消息</div> -->
        </div>
      </div>
      <div
        @click="$router.push('/commission-msg')"
        class="msg-cell with-grey-bottom-border"
      >
        <div class="img">
          <div v-if="unread.system" class="dot">{{ unread.system }}</div>
          <img src="@/assets/消息中心-assets/31.png" alt="" />
        </div>
        <div class="content">
          <div class="title">佣金消息</div>
          <!-- <div class="detail">最新官方消息</div> -->
        </div>
      </div>
      <div
        @click="$router.push('/receive-comment')"
        class="msg-cell with-grey-bottom-border"
      >
        <div class="img">
          <div v-if="unread.system" class="dot">{{ unread.system }}</div>
          <img src="@/assets/new-icon/comment.jpg" alt="" />
        </div>
        <div class="content">
          <div class="title">评论</div>
          <!-- <div class="detail">最新官方消息</div> -->
        </div>
      </div>
      <div
        @click="$router.push('/business-school')"
        class="msg-cell with-grey-bottom-border"
        v-if="vip_rule"
      >
        <div class="img">
          <div v-if="unread.college" class="dot">{{ unread.college }}</div>
          <img src="@/assets/消息中心-assets/21.png" alt="" />
        </div>
        <div class="content">
          <div class="title">商学院</div>
          <div class="detail">最新的商学院资料</div>
        </div>
      </div>
      <!-- <div
        @click="$router.push('/express')"
        class="msg-cell with-grey-bottom-border"
      >
        <div class="img">
          <div v-if="unread.logistics" class="dot">{{ unread.logistics }}</div>
          <img src="@/assets/消息中心-assets/41.png" alt="" />
        </div>
        <div class="content">
          <div class="title">物流助手</div>
          <div class="detail">最新物流订单消息</div>
        </div>
      </div> -->
      <!-- <div
        @click="$router.push('/support')"
        class="msg-cell with-grey-bottom-border"
      >
        <div class="img">
          <img src="@/assets/消息中心-assets/51.png" alt="" />
        </div>
        <div class="content">
          <div class="title">在线客服</div>
          <div class="detail">在线客服咨询时间为：9:00-22:00</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getUnreadMsg } from "@/api/msg-center";
import { mapState } from 'vuex'
export default {
  data() {
    return {
      unread: {}
    };
  },
  computed: {
    ...mapState({
      vip_rule: state => state.app.vip_rule
    })
  },
  created() {
    getUnreadMsg().then(res => {
      if (res.status === 200) {
        this.unread = res.data.data;
      }
    });
  }
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100%;
  height: auto;
  font-size: 0.64rem;
  color: #444444;

  .img {
    width: 1.9rem;
    height: 1.9rem;
    margin: 0.8rem auto 0.4rem;
    position: relative;

    .dot {
      height: 0.8rem;
      width: 0.8rem;
      background-color: #f85859;
      border-radius: 50%;
      border: 0.04rem solid rgba(255, 255, 255, 1);
      position: absolute;
      right: -0.2rem;
      top: -0.2rem;
      color: #fff;
      text-align: center;
      font-size: 0.48rem;
      line-height: 0.8rem;
    }

    img {
      width: 100%;
    }
  }

  .top-panel {
    background: #fff;
    height: 4.5rem;
    display: flex;
    padding: 0 0.8rem;
    justify-content: space-around;

    .top-cell {
      width: 30%;

      .text {
        text-align: center;
      }
    }
  }

  .msg-list {
    // margin-top: 0.48rem;
    // background: #fff;

    .msg-cell {
      height: 2.6rem;
      display: flex;
      background: #fff;
      padding: 0 3.4%;
      margin-bottom: 0.48rem;

      .img {
        margin: 0;
        margin-top: 0.35rem;
      }

      .content {
        margin-left: 0.56rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .title {
          margin: 0.4rem 0 0.15rem;
        }

        .detail {
          font-size: 0.56rem;
          color: #999999;
        }
      }
    }
  }
}
</style>
